<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>三目运算符</title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>
</body>

</html>

<script type="text/babel">

class Welcome extends React.Component {
   constructor(props) {
       super(props);
	// state的初始值
	this.state = {
		 show: true
	}
	this.toggleMsg = this.toggleMsg.bind(this);
   }

toggleMsg(flag) {
  // 修改state里show的值
	this.setState({
		show: flag
   })
}

   render() {
      return (
        <div>
		<button onClick={()=> {this.toggleMsg(true)}}>显示</button>
		<button onClick={()=> {this.toggleMsg(false)}}>隐藏</button>
		<hr />
		{this.state.show &&
                <p>React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC
                      框架，都不满意，就决定自己写一套，用来架设 Instagram
                      的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
                  </p>
		}
	    </div>
      )
   }
}

ReactDOM.render(
   <Welcome />,
   document.getElementById('root')
)
</script>